<template>
  <div class="search">
    <!-- 搜索组件一级路由   $router.back()返回上一个页面-->
    <van-nav-bar left-arrow
                 title="搜索中心"
                 @click-left="$router.back()">
    </van-nav-bar>

    <!-- https://youzan.github.io/vant/#/zh-CN/search -->
    <van-search show-action
                placeholder="请输入搜索关键词"
                shape="round"
                v-model.trim="keyword"
                @input="getSuggestions"
                @clear="clearKeyword">
      <template #action>
        <div @click="clickSearchBtn">搜索</div>
      </template>
    </van-search>

    <!-- 联想建议 -->
    <van-cell-group v-if="keyword">
      <van-cell icon="search"
                v-for="(item,index) in handlerSuggestionList"
                @click="clickSuggest(index)"
                :key="item">
        <div v-html="item"></div>
      </van-cell>
    </van-cell-group>
    <!-- /联想建议 -->

    <!-- 搜索历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录">
      </van-cell>
      <van-cell :title="item"
                v-for="(item,index) in history"
                :key="item"
                @click="$router.push('/result?keyword='+item)">
        <van-icon name="close"
                  @click.stop="delHistory(index)" />
      </van-cell>
    </van-cell-group>
    <!-- /搜索历史记录 -->
  </div>
</template>

<script>
import { reqGetSuggestions } from '@/api/search'
import { getHistory, setHistory } from '@/utils/storage'
export default {
  name: 'Search',
  data () {
    return {
      keyword: '', // 搜索关键字
      suggestionList: [], // 搜索联想建议数组
      history: getHistory() || [],
      timerId: null
    }
  },
  methods: {
    // 获取联想建议
    getSuggestions () {
      // 函数节流(函数防抖) -- 减少请求的发送 服务器压力少
      // 先清空上一次的等待
      clearTimeout(this.timerId)
      // 如果输入框的值为空 不发请求 ,需要将搜索建议结构数组清空
      this.timerId = setTimeout(async () => {
        if (this.keyword === '') {
          this.suggestionList = []
          return
        }
        const data = await reqGetSuggestions(this.keyword)
        // console.log(data)
        this.suggestionList = data.data.options
      }, 300)
      // 等待的事件不会给的太长 一般就是100-300毫秒之间
    },
    // 清除keyword
    clearKeyword () { },
    // 点击搜索按钮添加历史
    clickSearchBtn () {
      if (this.keyword === '') return
      // console.log('添加历史', this.keyword)
      this.addHistory(this.keyword)
      // 页面跳转 /result
      this.$router.push('/result?keyword=' + this.keyword)
    },
    clickSuggest (index) {
      // console.log('添加历史', this.suggestionList[index])
      this.addHistory(this.suggestionList[index])
      // 页面跳转 /result
      this.$router.push('/result?keyword=' + this.suggestionList[index])
    },
    addHistory (str) {
      console.log('追加历史了', str)
      // 历史追加 前置追加 (重复的数据先截取数据, 再将最新的历史追加)
      // 判断一下本身数组中有没有要追加的数据
      // const boo = this.history.some(item => item === str) // 判断布尔值
      // const boo = this.history.includes(str) // 判断布尔值
      const i = this.history.findIndex(item => item === str) // 判断索引
      // 如果不等于-1 先截取再存储
      if (i !== -1) {
        this.history.splice(i, 1)
      }
      this.history.unshift(str)
      // console.log(this.history)
      // 设置本地存储
      setHistory(this.history)
    },
    // 删除历史项
    delHistory (i) {
      this.history.splice(i, 1)
      // 设置本地存储
      setHistory(this.history)
    }
  },
  computed: {
    // 使用计算属性处理高亮的数据得到新数组
    handlerSuggestionList () {
      // const arr = this.suggestionList.map(item => {
      //   // 定义正则
      //   const reg = new RegExp(this.keyword, 'gi')
      //   const newstr = item.replace(reg, (match) => {
      //     // 这个return 匹配函数的返回值
      //     return `<span style="color:red">${match}</span>`
      //   })
      //   // map方法的返回值
      //   return newstr
      // })
      // // 计算属性的返回值
      // return arr
      return this.suggestionList.map(item => {
        // 定义正则
        const reg = new RegExp(this.keyword, 'gi')
        return item.replace(reg, (match) => `<span style="color:red">${match}</span>`)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
